<template>
    <div class="mini-player">
        <span class="close" @click="closeMiniplayer">x</span>
        <aplayer class="a-player"
                 ref="aplayer"
                 :music="currentAudio"
                 @pause="toPause"
                 @play="toPlay"
                 @controls="true"
        >
        </aplayer>
    </div>
</template>

<script>
    import Aplayer from 'vue-aplayer'
    import storage from 'good-storage'

    // 缓存索引 - 最近播放
    var RPR = "RecentPlayRecord";
    export default {
        name: "mini-player",
        data() {
            return {}
        },
        // 全局监听
        watch: {
            currentAudio() {
                this.$store.commit('setPlayerStatus', true);
                this.$refs.aplayer.onSelectSong(this.currentAudio);
            },
            isPlaying() {
                var isPlaying = this.isPlaying;
                if (isPlaying) {
                    this.$refs.aplayer.play()
                } else {

                    this.$refs.aplayer.pause()
                }
            }
        },
        computed: {
            currentAudio() {
                return this.$store.state.currentAudio;
            },
            isPlaying() {
                return this.$store.state.isPlaying;
            }
        },
        methods: {
            // 隐藏
            closeMiniplayer() {
                this.$store.commit("setPlayerStatus", false);
            },
            // 暂停
            toPause() {
                this.$store.commit("setPlayingStatus", false);
            },
            // 播放
            toPlay() {
                this.$store.commit("setPlayingStatus", true);
                this.setRecentPlayRecord();

            },
            // 记录到最近收听
            setRecentPlayRecord() {
                // 统一 服务端与组件 字段
                var currentAudio = {
                    "id": this.currentAudio.id,
                    "title": this.currentAudio.title,
                    "logo": this.currentAudio.pic,
                    "audio_oss_url": this.currentAudio.url,
                    "is_collected": this.currentAudio.is_collected,
                };
                var RecentPlayRecord = storage.get(RPR) || [];
                var len = RecentPlayRecord.length;
                var isRecord = 0;
                if (len > 0) {
                    for (var i = 0; i < len; i++) {
                        if (currentAudio.id === RecentPlayRecord[i].id) {
                            // 置顶
                            RecentPlayRecord.unshift(RecentPlayRecord.splice(i, 1)[0]);
                            isRecord = 1;
                        }
                    }
                }
                if (0 === len || 0 === isRecord) {
                    RecentPlayRecord.unshift(currentAudio);
                }
                storage.set(RPR, RecentPlayRecord);
            }
        },
        components: {
            Aplayer
        }
    }
</script>

<style scoped>
    .mini-player {
        position: fixed;
        width: 100%;
        right: 0;
        bottom: 9%;
    }

    .close {
        position: fixed;
        right: 0;
        float: right;
        z-index: 100;
        font-size: 20px;
        color: #eee;
        margin-right: 5px;
    }

    .a-player {
        background: none;
    }

    .a-player >>> .aplayer-info {
        background: rgba(0, 0, 0, .5);
        color: #fff;
    }

    .a-player >>> .aplayer-time {
        color: #fff;
    }

    .a-player >>> .aplayer-time {
        color: #fff;
    }

    .a-player >>> .aplayer-time .aplayer-icon {
        display: none;
    }
</style>